<template>
  <div class="mineEvaluate box-border min-h-screen">
    <div class="relative">
      <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
        <div class="relative">
          <div class="z-999 flex items-center justify-between px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
            <uni-icons type="back" size="28" />
            <span class="text-center text-36rpx font-600">我的评价</span>
            <div class="text-hex-fff">111</div>
          </div>
        </div>
        <div class="mt-48rpx flex justify-center">
          <div class="box-border flex rounded-60rpx bg-hex-ABCD03 p-4rpx text-28rpx text-hex-ffffff">
            <div
              v-for="item in tabList"
              class="box-border px-40rpx py-8rpx"
              :class="{ active: tabIndex===item.id }" @click="changeTabIndex(item.id)">
              {{ item.text }}
            </div>
          </div>
        </div>
        <div class="h-32rpx" />
      </div>
      <div class="mt-32rpx px-32rpx">
        <div>
          <div
            v-for="item in evaluationList"
            :key="item.id"
            class="item mb-32rpx box-border border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-20rpx"
            @click="goUserComment(item.productId)">
            <div class="flex items-center justify-between">
              <span class="text-24rpx text-hex-999">{{ formateTime(item.createdAt) }}</span>
              <div class="flex items-center">
                <image class="h-32rpx w-32rpx"
                       :src="iscommentLevel(item).image" mode="aspectFill" />
                <span class="ml-10rpx text-24rpx" :class="[iscommentLevel(item).styles]">{{ iscommentLevel(item).text }}</span>
              </div>
            </div>
            <span class="mt-24rpx text-28rpx text-hex-262626">{{ item.content }}</span>
            <div class="mt-24rpx h-104rpx flex">
              <div class="mr-16rpx h-100% w-104rpx flex items-center justify-center rounded-16rpx bg-hex-f5f5f5">
                <image
                  :src="item.productImage"
                  mode="scaleToFill"
                  class="h-94rpx w-64rpx"
                />
              </div>
              <div class="flex-1 bg-hex-f5f5f5 p-16rpx">
                <div class="text-24rpx font-600 text-hex-333">{{ item.productName }}</div>
                <div class="mt-4rpx text-24rpx text-hex-999">{{ item.attributeDesc }}</div>
              </div>
            </div>
            <div class="mt-16rpx flex items-center justify-between">
              <div>
                <!-- <div v-if="item.isExamine" class="border-2rpx border-hex-e499c2 rounded-8rpx border-solid px-10rpx text-20rpx leading-32rpx text-hex-E499C2">审核中</div> -->
              </div>
              <image
                :src="`${cdnUrl}/svgicons/search/del.svg${imgVersion}`"
                mode="scaleToFill"
                class="h-40rpx w-40rpx"
                @click="del(item.id)"
              />
            </div>
          </div>
          <div v-if="evaluationList.length1===0">
            <div class="mt-230rpx flex flex-col items-center">
              <div class="image">
                <image
                  :src="`${cdnUrl}/imgs/noOpen/noText.png${imgVersion}`"
                  mode="scaleToFill"
                  class="h-364rpx w-364rpx"
                />
              </div>
              <div class="mb-64rpx text-28rpx text-hex-7C8699">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div><confirm ref="confirmRef" /></div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'

let userInfo: any = useUserStore()
let confirmRef: any = $ref('')
let data = $ref([])
let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let tabIndex: any = $ref(2)
let isGetmore: any = $ref(false)
const tabList = [
  { id: 2, text: '茶饮订单' },
  { id: 3, text: '商城订单' },
]

//路由跳转
const navTo = (url) => {
  if (url) {
    uni.navigateTo({ url })
  }
}
const goUserComment = (productId) => {
  if (tabIndex === 2) {
    navTo(`/pages-tea/userComment?productId=${productId}`)
  } else {
    navTo(`/pages-shop/userComment?productId=${productId}`)
  }
}
const changeTabIndex = (index) => {
  evaluationList = []
  tabIndex = index
  handleGetEvaluationList()
}
const formateTime = (time) => {
  if (time) {
    return time.replace('T', ' ')
  }
}

//判断好评、中评、差评
const iscommentLevel = (item) => {
  let res = { image: `${cdnUrl}/imgs/mine/my_slices/haopin.png${imgVersion}`, text: '好评', styles: 'text-hex-D4392F' }
  if (item.level === 1) {
    res.image = `${cdnUrl}/imgs/mine/my_slices/zhongping.png${imgVersion}`
    res.text = '中评'
    res.styles = 'text-hex-E89C43'
  } else if (item.level === 2) {
    res.image = `${cdnUrl}/imgs/mine/my_slices/bad.png${imgVersion}`
    res.text = '差评'
    res.styles = 'text-hex-333'
  }
  return res
}
let pageNo: any = $ref(1)
let evaluationList: any = $ref([])
// 获取用户评价列表
const handleGetEvaluationList = async () => {
  const reqData = {
    method: 'post',
    data: {
      'pageNo': pageNo,
      pageSize: 10,
    },
    headers: {
      AppType: tabIndex,
      UserId: userInfo.user.id,
    },
  }
  const { status, data, error } = await Fetch('/qqyapi/product/product/evaluation/listByUser', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    evaluationList = evaluationList.concat(data?.result?.list)
    if (evaluationList.length < Number(data?.result?.total)) {
      isGetmore = true
      return
    }
    isGetmore = false
  }
}
// 删除评价接口
const delUserEvaluation = async (id) => {
  const reqData = {
    method: 'post',
    data: {
      'productEvaluationId': id,
    },
    headers: {
      AppType: tabIndex,
      UserId: userInfo.user.id,
    },
  }
  const { status, data, error } = await Fetch('/qqyapi/product/product/evaluation/delete', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    uni.showToast({
      title: '删除成功',
      icon: 'none',
      duration: 2000,
    })
    pageNo = 1
    evaluationList = []
    handleGetEvaluationList()
  }
}
//删除评论
const del = (id) => {
  confirmRef.showConfirm('确定删除这条评论吗?').then(res => {
    if (res) {
      delUserEvaluation(id)
    }
  })
}

onMounted(() => {
  handleGetEvaluationList()
})
// 触底加载更多
onPageScroll(() => {
  if (isGetmore) {
    pageNo++
    handleGetEvaluationList()
  }
})

</script>

<style lang="scss" scoped>
.mineEvaluate{
  .active{
    color: #ABCD03;
    background-color: #fff;
    border-radius: 60rpx;
  }
}

</style>
